<template>
   <div class="box">
        <div class="s1">
            <dv-border-box-1>
                <dv-scroll-board :config="config1" style="width:1300px;height:220px;margin-left: 80px; padding-top:15px" />
            </dv-border-box-1>
        </div>
        <div class="s2">
            <div class="s21">
                <h4>班级人数</h4>
                <dv-border-box-12 style="padding:50px 70px;box-sizing: border-box">
                    <dv-capsule-chart :config="config2" style="width:300px;height:200px;" />
                </dv-border-box-12>
            </div>
            <div class="s22">
                <h4>班级人数占比</h4>
                <dv-border-box-12>
                    <dv-active-ring-chart :config="config3" style="width:300px;height:300px;margin-left: 85px" />
                </dv-border-box-12>
            </div>
            <div class="s23">
                <h4>标题3</h4>
                <dv-border-box-12>
                    <dv-conical-column-chart :config="config4" style="width:400px;height:200px;margin-left: 30px;" />
                </dv-border-box-12>
            </div>
        </div>
   </div>
</template>

<script>
import instance from "@/http";

export default {
    name: "HomeView",
    data(){
        return{
            config1:{ },
            config2:{
                data: [
                    {
                        name: 'java',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            },
            config3:{
                data: [
                    {
                        name: 'JAVA',
                        value: 55
                    },
                    {
                        name: 'Web',
                        value: 120
                    },
                    {
                        name: '大数据',
                        value: 78
                    },
                    {
                        name: 'UI',
                        value: 66
                    },
                    {
                        name: '新媒体',
                        value: 80
                    }
                ],
                lineWidth: 10
            },
            config4:{
                data: [
                    {
                        name: '周口',
                        value: 55
                    },
                    {
                        name: '南阳',
                        value: 120
                    },
                    {
                        name: '西峡',
                        value: 71
                    },
                    {
                        name: '驻马店',
                        value: 66
                    },
                    {
                        name: '新乡',
                        value: 80
                    },
                    {
                        name: '信阳',
                        value: 35
                    },
                    {
                        name: '漯河',
                        value: 15
                    }
                ]
            }
        }
    },
    created() {
        // 发送请求 获取学生考试成绩  数据可视化  Data visual
        instance.get("/dataVisual/score").then(res=>{
            // 处理学生成绩的数据格式  符合表格的数据格式要求  [{},{},{}]   =>  [[],[],[]]
            if (res.data.code==0){
                var scores =  res.data.data.scores  // [{},{},{}]
                var tableData =  scores.map(s=>{
                    return[
                        s.studentNo,
                        s.studentName,
                        s.clazz,
                        s.examContent,
                        s.score
                    ]
                })
                this.config1 = {
                    evenRowBGC:'',   //  改变偶数行的背景色
                    oddRowBGC:'',  //  改变奇数行的背景色
                    align:['center','center','center','center','center'],   //  设置每列文本居中
                    data:tableData   // [[],[],[]]
                }
            }
        })


        instance.get("/dataVisual/student").then(res=>{
            // 处理学生成绩的数据格式  符合表格的数据格式要求  [{},{},{}]   =>  [[],[],[]]
            if (res.data.code==0){
                var studentNumber =  res.data.data.studentNumber  // [{},{},{}]
               this.config2 = {
                   data: studentNumber
               }
            }
        })

    }
}
</script>

<style scoped>

.box{
    width: 95%;
    height: 550px;
    margin: 0 auto;
}

.s1{
    height: 260px;
    background-color: #2c3e50;
    border-radius: 20px;
}
.s2{
    height: 280px;
    /*background-color: skyblue;*/
    margin-top: 10px;
/*    弹性布局*/
    display: flex;
/*    元素的排列方案*/
    justify-content: space-between;
}

.s2>div{
    width: 450px;
    height: 280px;
    background-color: #2c3e50;
    border-radius: 17px;
    position: relative;
}

h4{
    color: white;
    position: absolute;
    left: 200px;
    top: 15px;
}
</style>